<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>统计商家业绩</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../../css/utils/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../../css/utils/mui.picker.min.css" />
	<style>
		html,
		body,
		.mui-content {
			height: 0px;
			margin: 0px;
			background-color: #fff;
		}
		.time-search {
			margin-top: 20px;
			display: flex;
			justify-content:space-between;
		}
		.time-btn {
			width: 120px;
			font-size: 14px;
			color: #FF3300;
		}
		.mui-btn {
			margin: 3px;
			vertical-align: middle;
		}
		.income-total {
			margin: 0 auto;
			margin-top: 50px;
			width: 240px;
			height: 150px;
			border-radius: 20px;
			background: #EC4D51;
			font-size: 18px;
			text-align: center;
			color: #fff;
		}
		.company-qrcode {
			margin: 0 auto;
			margin-top: 50px;
			width: 240px;
			height: 240px;
			background-color: #fff;
			border-radius: 10px;
			z-index: 91;
			text-align: center;
		}
		.company-qrcode-img {
			margin: 0 auto;
			margin-top: 10px;
			width: 175px;
			height: 175px;
		}
		.company-qrcode-img img {
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<h1 id="merchantName" class="mui-title">商家名称</h1>
	</header>
	<div class="mui-content">
		<div class="time-search">
			<div>
				<button id='startDateTime' data-options='{"type":"date"}' class="btn mui-btn time-btn">开始时间</button>
				<span>至</span>
				<button id='endDateTime' data-options='{"type":"date"}' class="btn mui-btn time-btn">结束时间</button>
			</div>
			<div>
				<button id="searchMerchantIncome" type="button" class="mui-btn">查询</button>
			</div>
		</div>
		<div class="income-total">
			<div style="padding-top: 50px;">店主业绩（元） </div>
			<div id="totalIncome" style="margin-top: 10px;">4013.3</div>
		</div>
		<div class="company-qrcode">
			<div class="qrcode-prompt">长按二维码进入自家商城</div>
			<div class="company-qrcode-img">
				<img id="qrcode" src="" />
			</div>
		</div>
	</div>	
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/mui.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/mui.picker.min.js"></script>
	<script type="text/javascript" src="../../js/utils/regular.js"></script>
	<script type="text/javascript" src="../../js/utils/boot.js?version=2" ></script>
	<script>
		var customerID = base.getParameter("customerID");
		(function($) {
			$.init();
			base.postData(base.url.totalMerchantPrice,{customerID:customerID},totalMerchantPriceCallback);
			var btns = $('.btn');
			btns.each(function(i, btn) {
				btn.addEventListener('tap', function() {
					var _self = this;
					if(_self.picker) {
						_self.picker.show(function (rs) {
							_self.innerText = rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					} else {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						_self.picker = new $.DtPicker(options);
						_self.picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							_self.innerText = rs.text;
							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							_self.picker.dispose();
							_self.picker = null;
						});
					}
					
				}, false);
			});
		})(mui);
	
		$("#searchMerchantIncome").on("tap", function(){
			var startDateTime = $("#startDateTime").text();
			if (startDateTime == "开始时间") {
				mui.toast("请选择开始时间");
				return;
			}
			var endDateTime = $("#endDateTime").text();
			if (endDateTime == "结束时间") {
				mui.toast("请选择结束时间");
				return;
			}
			if (CompareDate(startDateTime, endDateTime)) {
				mui.toast("结束时间不能低于开始时间");
				return;
			}
			base.postData(base.url.totalMerchantPrice,{startTime:startDateTime,endTime:endDateTime,customerID:customerID},totalMerchantPriceCallback);
		});
		
		function totalMerchantPriceCallback(data) {
			if (data.success) {
				$("#totalIncome").html(data.context.count);
				$("#startDateTime").text(data.context.startTime);
				$("#endDateTime").text(data.context.endTime);
				$("#merchantName").text(data.context.merchantName);
				if (data.context.codeUrl == null || data.context.codeUrl == "") {
					mui.toast("结束时间不能低于开始时间");
				}
				$("#qrcode").attr("src", data.context.codeUrl);
			}else{
				mui.alert('请点击确定按钮', data.msg, function() {
					window.location.href= server_root+"/phone/web/toBindingPhone.do"
				});
			}
		}
	</script>
</body>
</html>
